<template>
  <div>
    <div style="display: flex; justify-content: flex-start">
      <el-input
        placeholder="档案号/姓名/手机号"
        v-model="page.searchObj.queryName"
        autofocus
        style="width: 230px; margin-right: 30px"
        clearable
        ><i slot="prefix" class="el-input__icon el-icon-search"></i
      ></el-input>
      <el-button type="primary" icon="el-icon-search" @click="query"
        >搜索</el-button
      >
    </div>
    <el-button
      type="primary"
      style="display: flex; justify-content: flex-start; margin: 10px 0"
      @click="showSave"
      >新增档案</el-button
    >
    <el-table
      :data="tableData"
      style="width: 100%"
      height="65vh"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="file_number" label="档案号" sortable>
      </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="value">
          <span>{{ value.row.sex | sexFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" sortable> </el-table-column>
      <el-table-column prop="user_name" label="健康管理师"> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column prop="create_time" label="注册时间" sortable>
      </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="value">
          <span>
            <el-switch
              style="display: block"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="启用"
              inactive-text="禁用"
              v-model="value.row.state"
              :active-value="0"
              inactive-value="1"
              @change="updateState(value.row)"
            >
            </el-switch>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="value">
          <span>
            <el-button type="primary" icon="el-icon-edit" @click="showUpdate(value.row)" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[5, 10]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 新增 -->
    <el-dialog title="新增档案" :visible.sync="dialogFormVisible">
      <el-tabs type="border-card">
        <el-tab-pane label="个人信息">
          <el-form
            v-if="dialogFormVisible"
            :model="numberValidateForm"
            ref="numberValidateForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <div style="display: flex; justify-content: space-around">
              <div>
                <el-form-item
                  label="姓名"
                  prop="name"
                  :rules="[{ required: true, message: '姓名不能为空' }]"
                >
                  <el-input
                    clearable
                    placeholder="请输入姓名"
                    v-model="numberValidateForm.name"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="性别">
                  <el-radio
                    v-model="numberValidateForm.sex"
                    label="1"
                    border
                    >男</el-radio
                  >
                  <el-radio
                    v-model="numberValidateForm.sex"
                    label="0"
                    border
                    >女</el-radio
                  >
                </el-form-item>
              </div>
            </div>

            <div style="display: flex; justify-content: space-around">
              <div>
                <el-form-item
                  label="年龄"
                  prop="age"
                  :rules="[
                    { required: true, message: '年龄不能为空' },
                    { type: 'number', message: '年龄必须为数字值' },
                  ]"
                >
                  <el-input
                    placeholder="请输入年龄"
                    clearable
                    v-model.number="numberValidateForm.age"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </div>
              <div>
                <el-form-item
                  label="身份证"
                  prop="card"
                  :rules="[{ required: true, message: '身份证不能为空' }]"
                >
                  <el-input
                    clearable
                    placeholder="请输入身份证"
                    v-model="numberValidateForm.card"
                    autocomplete="off"
                    @change="cid"
                  ></el-input>
                </el-form-item>
              </div>
            </div>

            <div style="display: flex; justify-content: space-around">
              <div>
                <el-form-item
                  label="手机号"
                  prop="phone"
                  :rules="[
                    { required: true, message: '手机号不能为空' },
                    { type: 'number', message: '手机号必须为数字值' },
                  ]"
                >
                  <el-input
                    placeholder="请输入手机号"
                    clearable
                    v-model.number="numberValidateForm.phone"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </div>
              <div>
                <el-form-item
                  label="账户密码"
                  prop="password"
                  :rules="[{ required: true, message: '密码不能为空' }]"
                >
                  <el-input
                    clearable
                    placeholder="请输入账户密码"
                    type="password"
                    v-model="numberValidateForm.password"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </div>
            </div>

            <div style="display: flex; justify-content: space-around">
              <div>
                <el-form-item label="邮箱" prop="mailbox">
                  <el-input
                    placeholder="请输入邮箱地址"
                    clearable
                    v-model="numberValidateForm.mailbox"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="民族" prop="nation">
                  <el-select
                    v-model="numberValidateForm.nation"
                    placeholder="请选择民族"
                  >
                    <el-option label="汉族" value="汉族"></el-option>
                    <el-option label="蒙古族" value="蒙古族"></el-option>
                    <el-option label="苗族" value="苗族"></el-option>
                    <el-option label="壮族" value="壮族"></el-option>
                    <el-option label="藏族" value="藏族"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>

            <div style="display: flex; justify-content: space-around">
              <div>
                <el-form-item label="出生日期" prop="birthdate">
                  <el-date-picker
                    v-model="numberValidateForm.birthdate"
                    type="date"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    placeholder="选择出生日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="职业" prop="occupation">
                  <el-input
                    clearable
                    placeholder="请输入职业"
                    v-model="numberValidateForm.occupation"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </div>
            </div>

            <div style="display: flex; justify-content: space-around">
              <div>
                <el-form-item label="文化程度" prop="culture">
                  <el-select
                    v-model="numberValidateForm.culture"
                    placeholder="请选择文化程度"
                  >
                    <el-option label="小学" value="小学"></el-option>
                    <el-option label="初中" value="初中"></el-option>
                    <el-option label="高中" value="高中"></el-option>
                    <el-option label="中专" value="中专"></el-option>
                    <el-option label="大专" value="大专"></el-option>
                    <el-option label="本科" value="本科"></el-option>
                    <el-option label="研究生" value="研究生"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="健康师" prop="jkgls">
                  <el-input
                    clearable
                    placeholder="请输入健康医疗师"
                    v-model="numberValidateForm.jkgls"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div style="display: flex; justify-content: space-around">
              <div>
                <el-form-item label="备注">
                  <el-input
                    rows="5"
                    style="width: 564px"
                    type="textarea"
                    v-model="numberValidateForm.remark"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="身体状况">
          <el-form label-width="100px" class="demo-ruleForm">
            <div style="display: flex; justify-content: space-around">
              <div>
                <el-form-item label="身高/CM" prop="height">
                  <el-input-number
                    v-model="numberValidateForm.height"
                    controls-position="right"
                    :min="1"
                  ></el-input-number>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="体重/g" prop="weight">
                  <el-input-number
                    v-model="numberValidateForm.weight"
                    controls-position="right"
                    :min="1"
                  ></el-input-number>
                </el-form-item>
              </div>
            </div>

            <div style="display: flex; justify-content: space-around">
              <div>
                <el-form-item label="舒张压/mmHg" prop="diastolic_pressure">
                  <el-input-number
                    v-model="numberValidateForm.diastolic_pressure"
                    controls-position="right"
                    :min="1"
                  ></el-input-number>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="收缩压/mmHg" prop="systolic_pressure">
                  <el-input-number
                    v-model="numberValidateForm.systolic_pressure"
                    controls-position="right"
                    :min="1"
                  ></el-input-number>
                </el-form-item>
              </div>
            </div>

            <div style="display: flex; justify-content: space-around">
              <div>
                <el-form-item label="BMI/kg/m2" prop="bmi">
                  <el-input-number
                    v-model="numberValidateForm.bmi"
                    controls-position="right"
                    :min="1"
                  ></el-input-number>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="体温/°C" prop=" temperature">
                  <el-input-number
                    v-model="numberValidateForm.temperature"
                    controls-position="right"
                    :min="1"
                  ></el-input-number>
                </el-form-item>
              </div>
            </div>

            <div style="display: flex; justify-content: space-around">
              <div>
                <el-form-item label="腰围/CM" prop="waistline">
                  <el-input-number
                    v-model="numberValidateForm.waistline"
                    controls-position="right"
                    :min="1"
                  ></el-input-number>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="臀围/CM" prop="hip">
                  <el-input-number
                    v-model="numberValidateForm.hip"
                    controls-position="right"
                    :min="1"
                  ></el-input-number>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="历史记录">
          <el-form label-width="100px" class="demo-ruleForm">
            <el-form-item label="既往史">
              <el-input type="textarea" v-model="numberValidateForm.past_history"></el-input>
            </el-form-item>
            <el-form-item label="家族史">
              <el-input type="textarea" v-model="numberValidateForm.family_history"></el-input>
            </el-form-item>
            <el-form-item label="过敏史">
              <el-input type="textarea" v-model="numberValidateForm.allergic_history"></el-input>
            </el-form-item>
            <el-form-item label="病史">
              <el-input type="textarea" v-model="numberValidateForm.medical_history"></el-input>
            </el-form-item>
            <el-form-item label="慢性病">
              <el-input type="textarea" v-model="numberValidateForm.chronic"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('numberValidateForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  
  
  <script>
export default {
  data() {
    return {
      tableData: [], //表格数据
      total: 0, //总页数
      page: {
        //分页查询条件
        pageNum: 1, //当前页
        pageSize: 5, //页面数量
        searchObj: {
          //条件对象
          queryName: "", //档案号/姓名/手机号查询
        },
      },
      dialogFormVisible: false, //新增模态框布尔值
      numberValidateForm: {
        //新增表单验证
        name: "", //姓名
        password: "", //用户密码
        sex:1, //性别
        age: "", //年龄
        phone: "", //手机号
        card: "", //身份证
        mailbox: "", //邮箱
        nation: "汉族", //民族
        birthdate: "", //出生日期
        // create_time:'',//创建时间
        occupation: "", //职业
        culture: "", //文化程度
        jkgls: "0", //健康医疗师
        remark: "", //备注
        //身体状况
        height: "", //身高
        weight: "", //体重
        diastolic_pressure: "", //舒张压
        systolic_pressure: "", //收缩压
        bmi: "", //BMI
        temperature: "", //体温
        waistline: "", //腰围
        hip: "", //臀围
        //历史记录
        past_history:'',//既往史
        family_history:'',//家族史
        allergic_history:'',//过敏史
        medical_history:'',//病史
        chronic:''//慢性病
      },
    };
  },
  created() {
    this.searchQueryMember();
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.searchQueryMember();
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.searchQueryMember();
    },
    searchQueryMember() {
      this.axios
        .post("/api/hj/searchQueryMember", this.page)
        .then((result) => {
          this.total = result.data.total;
          this.tableData = result.data.list;
        })
        .catch((error) => {
          alert("出错了");
        });
    },
    // 条件查询
    query() {
      this.searchQueryMember();
    },
    //新增档案表单验证
    showSave() {
      this.numberValidateForm.sex = "1";
      this.numberValidateForm.nation = "汉族";
      this.dialogFormVisible = true;
    },
    cid(){
      this.axios.get("https://www.345api.cn/api/IDCard/query",{params:{
        key: 'y9rB1Hp0BbyLCEMMjTTskaL68i',
		    id :this.numberValidateForm.card,
      }}).then(result=>{
        if(result.data.code==200){
          console.log(result.data)
          let date = result.data.data.birthday_array.year+"-"+result.data.data.birthday_array.month+"-"+result.data.data.birthday_array.day;
          this.numberValidateForm.birthdate=date;
          alert(this.numberValidateForm.birthdate);
        }else{

        }
        
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let date = new Date();
          this.numberValidateForm.create_time=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
          console.log(this.numberValidateForm);
          this.axios.post("/api/hj/save",this.numberValidateForm)
          .then(result=>{
            if(result.data>0){
              this.$message({
          message: '成功操作一条数据',
          type: 'success'
        });
            }
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    showUpdate(obj){
      this.numberValidateForm=obj;
      this.dialogFormVisible=true;
    },

    // 修改状态
    state(id, state) {
      this.axios
        .get("/api/hj/updateState", {
          params: {
            id: id,
            state: state,
          },
        })
        .then((result) => {
          this.searchQueryMember();
        });
    },
    updateState(obj) {
      // 0表示启用 1表示禁用
      if (obj.state > 0) {
        this.state(obj.file_number, 1);
      } else {
        this.state(obj.file_number, 0);
      }
    },
  },
  filters: {
    // 性别
    sexFilter: function (data) {
      return data == 0 ? "女" : "男";
    },
    //状态
    stateFilter: function (data) {
      if (data == 0) {
        this.va;
      }
    },
  },
};
</script>